<template>
  <div>
    <el-row>
      <el-col :span="3">
        <el-input
          v-model="ser.employee_name"
          placeholder="请输入员工名称"
        ></el-input>
      </el-col>
      <el-col :span="4">
        <el-date-picker v-model="value3" type="year" placeholder="选择年">
        </el-date-picker>
      </el-col>
      <el-col :span="4">
        <el-date-picker
      v-model="value2"
      type="month"
      placeholder="选择月">
    </el-date-picker>
      </el-col>
      <el-col :span="4">
        <el-input
          v-model="ser.card_number"
          disabled
          placeholder="请读取卡片信息"
          style="margin-left: 10px"
        >
          <el-button
            @click="getkas"
            slot="append"
            icon="el-icon-plus"
            style="background: #1890ff; color: #fff"
            >读卡</el-button
          >
        </el-input>
      </el-col>
      <el-col :span="12">
        <el-button
          @click="company_name_click(0)"
          icon="el-icon-search"
          class="add_btn"
        >
          搜索</el-button
        >
        <el-button
          icon="el-icon-refresh"
          @click="company_name_clicks"
          class="add_btn"
        >
          重置</el-button
        >
      </el-col>
    </el-row>

    <el-table :data="productList" stripe style="width: 100%" border>
      <el-table-column prop="employee_name" label="员工" width="180">
      </el-table-column>
      <el-table-column label="考勤记录">
        <template slot-scope="scope">
          <div>
            <table class="kaoqin_table">
              <tr>
                <td>
                  <span>日期</span>
                  <span>上班</span>
                  <span>下班</span>
                </td>
                <td
                  v-for="(item, index) in scope.row.appendance_log"
                  :key="index"
                >
                  <span>{{ item.date }}</span>
                  <div>
                    <span v-if="item.first == 1" :title="item.first_time">
                      <i
                        class="el-icon-success"
                        style="color: green; font-size: 18px"
                      ></i
                    ></span>
                    <span v-if="item.first == 2">
                      <i
                        class="el-icon-remove"
                        style="color: rgb(144, 148, 140); font-size: 18px"
                      ></i
                    ></span>
                    <span v-if="item.first == 3" :title="item.first_time">
                      迟到</span
                    >
                    <span v-if="item.first == 4"> 休息</span>
                    <span v-if="item.first == 5"> 请假</span>
                  </div>
                  <div>
                    <span v-if="item.last == 1" :title="item.last_time">
                      <i
                        class="el-icon-success"
                        style="color: green; font-size: 18px"
                      ></i
                    ></span>
                    <span v-if="item.last == 2">
                      <i
                        class="el-icon-remove"
                        style="color: rgb(144, 148, 140); font-size: 18px"
                      ></i
                    ></span>
                    <span v-if="item.last == 3" :title="item.last_time">
                      迟到</span
                    >
                    <span v-if="item.last == 4"> 休息</span>
                    <span v-if="item.last == 5"> 请假</span>
                    <span v-if="item.last == 6" :title="item.last_time">
                      早退</span
                    >
                  </div>
                </td>
              </tr>
            </table>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="150">
        <template slot-scope="scope">
          <el-button
            @click="set_product(scope.row)"
            type="text"
            icon="el-icon-edit"
            >编辑</el-button
          >
          <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            title="是否删除这条数据？"
            @confirm="del_product(scope.row)"
          >
            <el-button slot="reference" type="text" icon="el-icon-delete">
              删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { getAppendanceLogList } from "@/api/product/index";
export default {
  data() {
    return {
      ser: {
        employee_name: "",
        productList: [],
      },
      productList: [],
    };
  },
  mounted() {
    this.get_AppendanceLogList();
  },
  methods: {
    getkas() {
      var that = this;
      that
        .$axios("http://127.0.0.1:9191/getCardId")
        .then(function (response) {
          console.log(response.data);
          if (response.data.state == 0) {
            that.ser.card_number = response.data.cardid;
            that.getlist();
          }
        })
        .catch(function (err) {
          that.$message.error("请下载并启动读卡通讯程序或检查读卡器是否接入~");
          console.log(err);
        });
    },
    get_AppendanceLogList() {
      getAppendanceLogList().then((res) => {
        if (res.code == 200) {
          this.productList = res.data.data;
        }
      });
    },
    company_name_click(type) {
      if (type == 0) {
        this.pagination.per_page = 10;
        this.pagination.page = 1;
      }
      getAppendanceLogList({ ...this.ser, ...this.pagination }).then((res) => {
        if (res.code == 200) {
          this.productList = res.data.data;
          this.total = res.data.total;
        }
      });
    },
    company_name_clicks() {
      this.ser.company_name = "";
      getAppendanceLogList(this.pagination).then((res) => {
        if (res.code == 200) {
          this.productList = res.data.data;
          this.total = res.data.total;
        }
      });
    },
  },
};
</script>
<style>
.kaoqin_table {
  width: 100%;
}
.kaoqin_table tr {
  display: flex;
}
.kaoqin_table tr td {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}
</style>
